<template>
     <div class="actor">
      <div class="actor-box">
        <div>视频推荐</div>
        <div>全部139张</div>
      </div>
      <ul>
        <li v-for="(item, index) in brr" :key="index" @click="goVideo(item.video.url)">
          <img :src="item.video.imgUrl" alt="" :onerror="errorimg" />
          <div class="bo">
              <img src="../../assets/images/bobo.png" alt="">
          </div>
        </li>
      </ul>
    </div>
</template>
<script>
export default {
    props:{
        brr:{
            typeof:Array
        }
    },
    methods:{
        goVideo(a){
            // console.log(a);
            // this.$router.push('/myVideo')
            this.$router.push({path:'/myVideo',query:{video:a}})

        }
    },
    
    data(){
        return{
             errorimg:'this.src="'+require('@/assets/images/dita.gif')+'"',//备用图片
        }
    },
    created(){
        // console.log(this.brr);
    }
}
</script>
<style lang="less" scoped>
.actor {
    .actor-box {
      display: flex;
      justify-content: space-between;
      font-size: 10px;
      color: #cccccc;
      padding: 10px 0 0 0;

      > div {
        &:nth-child(1) {
          color: white;
          font-size: 15px;
        }
      }
    }
    box-sizing: border-box;
    width: 100%;
    padding: 15px;
    ul {
      display: flex;
      overflow-x: auto;
      white-space: nowrap;
      // overflow: hidden;
      &::-webkit-scrollbar {
        display: none;
      }
      li {
          position: relative;
        margin: 10px;
        margin-right: 0px;
        .bo{
            position: absolute;
            top: 48%;
            left: 41%;
            transform: translateX(-50%);
            transform: translateY(-50%);
            width: 32px;
            height: 32px;
            background-color: #fff;
            border-radius: 50px;
            img{
                width: 15px;
                height: 15px;
                margin: 9px 0 0 10px
            }
        }

        img {
          width: 140px;
          height: 93px;
        }
      }
    }
  }
</style>